<template>
  <div>
    <h2>v-model, sync复习----{{ value }}---{{ msg }}
    </h2>
    <div>
      <el-button @click="btn">子组件修改父组件</el-button>
      <el-button @click="btn2">sync子组件修改父组件</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SyncCom', // 帕斯卡命名法
  props: ['value', 'msg'],
  data() {
    return {
      // 如果硬是要修改父组件的数据，就是在子组件的data里面 声明一个自己的数据，用props作为data上面数据的初始值
      aaa: this.value
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    btn() {
      // 下面这句话绝对不能写，因为vue是单向
      // 数据流，只能通知父组件去改自己的数据
      // this.value = this.value + 1
      this.$emit('input', this.value + 1)
    },
    btn2() {
      this.$emit('update:msg', this.msg + 1)
    }
  }
}
</script>
<style lang='less'  scoped>

</style>
